<template>
  <!-- 充值卡 -->
  <div>
    <el-dialog
      v-el-drag-dialog
      title="充值卡列表"
      :visible.sync="visible"
      width="1024px"
    >
      <lb-table
        ref="lbTable"
        v-loading="$loadingPlugin.fetchData"
        border
        highlight-current-row
        element-loading-text="加载中"
        :column="tableData.column"
        :data="tableData.data"
        pagination
        :total="tableData.total"
        :immediate-fetch="false"
        custom-column
        @fetch="fetchData"
      />
    </el-dialog>
  </div>
</template>

<script>
  import { formatColumnMap, parseTime } from '@/utils'
  import { queryCsmcardList } from '@/api'

  export default {
    name: 'refillCard',
    props: {
      cardStatusMap: {
        type: Array,
        required: true
      }
    },
    data() {
      return {
        visible: false,
        csmCode: '',
        tableData: {
          column: [
            {
              prop: 'cardCode',
              width: 110,
              label: '卡号'
            },
            {
              prop: 'cardStatus',
              label: '状态',
              render: (h, { row }) => <span>{ row.cardStatus && formatColumnMap(this.cardStatusMap, 'value', row.cardStatus, 'desc') }</span>
            },
            {
              prop: 'cardSurplus',
              width: 120,
              label: '卡余额',
              formatter: row => this.numberFormat(row, row.cardSurplus)
            },
            {
              prop: 'cashMoney',
              width: 120,
              label: '现金卡值',
              formatter: row => this.numberFormat(row, row.cashMoney)
            },
            {
              prop: 'sendMoney',
              width: 120,
              label: '赠送卡值',
              formatter: row => this.numberFormat(row, row.sendMoney)
            },
            {
              prop: 'totalCardMoney',
              width: 120,
              label: '储值累计',
              formatter: row => this.numberFormat(row, row.totalCardMoney)
            },
            {
              prop: 'totalPayMoney',
              width: 120,
              label: '消费累计',
              formatter: row => this.numberFormat(row, row.totalPayMoney)
            },
            {
              prop: 'totalPayCount',
              label: '消费次数'
            },
            {
              prop: 'lastPayTime',
              label: '最后交易时间',
              width: 160,
              render: (h, { row }) => <span>{ row.lastPayTime && parseTime(row.lastPayTime, '{y}-{m}-{d} {h}:{i}:{s}') }</span>
            },
            {
              prop: 'startDt',
              label: '开卡日期',
              width: 160,
              render: (h, { row }) => <span>{ row.startDt && parseTime(row.startDt, '{y}-{m}-{d} {h}:{i}') }</span>
            },
            {
              prop: 'createUser',
              label: '开卡人'
            },
            {
              prop: 'orgName',
              label: '开卡机构'
            },
            {
              prop: 'remark',
              label: '备注'
            }
          ],
          data: []
        }
      }
    },
    methods: {
      open(temp) {
        this.csmCode = temp.csmCode
        this.fetchData({ currentPage: 1, pageSize: 10 })
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
          if (temp) {
            this.temp = Object.assign(this.temp, temp)
          }
        })
      },
      async fetchData({ currentPage, pageSize }) {
        const query = {
          csmCode: this.csmCode,
          currentPage,
          pageSize
        }
        const res = await queryCsmcardList(query)
        this.tableData.data = res.data.rows
        if (currentPage === 1) this.tableData.total = res.data.total
      },
      // 卡余额/余数
      numberFormat(r, val) {
        const rcType = r.rcType // 为1表示余额 为2表示次数
        if (rcType === 1) {
          val = val * 1.00 / 100
        }
        val = Number(val)
        if (rcType === 1) {
          val = isNaN(val) ? '0.00' : val.toFixed(2)
          return val + ' 元'
        } else if (rcType === 2) {
          return val + ' 次'
        } else {
          return ''
        }
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>
